<!--  -->
<template>
  <div class="password-guide">
    <el-dialog title="账户安全提醒" :visible.sync="dialogVisible" width="490px" @closed="close" :close-on-click-modal="false">
      <div class="notice">
        <p>您的账户存在安全隐患，建议修改密码以提升您的安全等级</p>
        <p class="red" v-if="passwordtoshort"> ·  密码长度低于安全标准(8位及以上) </p>
        <p class="red" v-if="passwordlongtime">  ·  累计超过180天未修改密码 </p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" size="small">暂不修改</el-button>
        <el-button type="primary" @click="updateNow" size="small">立即修改</el-button>
      </div>
    </el-dialog>
    <UserPasswordUpdate ref="userPasswordUpdate" />
  </div>
</template>

<script>
import UserPasswordUpdate from '@/components/header/backendHeader/opation/right/user/UserPasswordUpdate.vue'
export default {
  props: {
    passwordlongtime: {
      type: Boolean
    },
    passwordtoshort: {
      type: Boolean
    }
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    show () {
      this.dialogVisible = true
    },
    close () {
      this.dialogVisible = false
    },
    updateNow () {
      this.$refs['userPasswordUpdate'].show()
      setTimeout(() => {
        this.dialogVisible = false
      }, 500)
    }
  },
  components: {
    UserPasswordUpdate
  }
}

</script>
<style scoped lang="scss">
.password-guide .notice{
  font-size: 16px;
  color: #333;
  p{margin-bottom: 10px;}
  .red{
    color: red;
    font-size: 15px;
  }
}
</style>
